<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <script src="../vue3.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .checkAll {
            width: 1200px;
            margin: 20px auto;
        }

        .cdt-list {
            width: 1200px;
            height: 100px;
            margin: 20px auto;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            border: 1px solid gray;
            border-radius: 5px;
        }

        .checkAll input, .cdt-list .checkbox input {
            width: 15px;
            height: 15px;
        }

        .cdt-list img {
            width: 100px;
            height: 100px;
            border-radius: 5px;
        }

        .cdt-list .info {
            width: 300px;
            padding: 10px 0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .cdt-list .number {
            width: 100px;
            display: flex;
            align-items: center;
        }

        .cdt-list .number span {
            margin: 0 5px;
        }

        .cdt-list .number button {
            width: 20px;
            height: 20px;
            line-height: 16px;
            font-size: 18px;
            text-align: center;
        }

        .cdt-list .checkbox, .cdt-list .btn {
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .cdt-list .btn button {
            outline: none;
            font-size: 13px;
            font-weight: 500;
            padding: 3px 12px;
            color: #ff8432;
            background-color: #fff;
            border: 1px solid #ff8432;
            border-radius: 2px;
        }

        .cdt-list .btn button:hover {
            color: #fff;
            background-color: #ff8432;
        }

        .cdt-list .btn button:active {
            background-color: #ffb480;
        }

        .priceAll {
            width: 1200px;
            font-size: 20px;
            float: right;
        }
    </style>
</head>
<body>
<div id="box">
    <div class="checkAll">
        <label>
            <input type="checkbox" v-model="checkAll" @change="handleCheckAll()">
        </label>全选/全不选
    </div>
    <ul>
        <li v-for="item in datalist" :key="item.id">
            <div class="cdt-list">
                <label class="checkbox">
                    <input type="checkbox" v-model="checkList" :value="item" @change="handleCheck()">
                </label>
                <img :src="item.pic" alt="">

                <div class="info">
                    <span>{{item.name}}</span>
                    <div>
                        <span>价格：</span>
                        <span style="color: #FF3939FF">{{item.price}}</span>
                    </div>
                </div>

                <div class="number">
                    <button @click="item.num--" :disabled="item.num===1">-</button>
                    <span>{{item.num}}</span>
                    <button @click="item.num++" :disabled="item.num===item.limit">+</button>
                </div>
                <div class="btn">
                    <button @click="handleDel(item.id)">删除</button>
                </div>
            </div>
        </li>
    </ul>

<!--    <div class="priceAll">总金额：<span style="color: #FF3939FF">{{sum()}}</span></div>-->
    <div class="priceAll">总金额：<span style="color: #FF3939FF">{{ computedSum }}</span></div>
</div>
<script>
    let obj = {
        data() {
            return {
                checkAll: false,
                checkList: [],
                datalist: [
                    {
                        id: 1,
                        name: '松下（Panasonic）电动剃须刀',
                        price: 399.00.toFixed(2),
                        num: 1,
                        limit: 10,
                        pic: "https://img14.360buyimg.com/n12/jfs/t1/211008/15/14085/178946/61cabeacEd0a87e66/0efa82e667f291a2.jpg"
                    },
                    {
                        id: 2,
                        name: '森海塞尔（Sennheiser）MOMENTUM 真无线二代蓝牙',
                        price: 1799.00.toFixed(2),
                        num: 1,
                        limit: 5,
                        pic: "https://img14.360buyimg.com/n12/jfs/t1/211020/7/13860/124316/61c6c2ebEb7b53b10/a4d0f5b421174196.jpg"
                    },
                    {
                        id: 3,
                        name: '外婆心重庆小面非油炸166g*5份袋装麻辣口味',
                        price: 33.90.toFixed(2),
                        num: 1,
                        limit: 50,
                        pic: "https://img14.360buyimg.com/n12/jfs/t1/218788/18/7715/181167/61b9430aE61002f57/6648bfb65c417f21.jpg"
                    },
                ]
            }
        },
        methods: {
            // sum() {
            //     let tol = 0;
            //     this.checkList.forEach(item => {
            //         tol += item.price * item.num;
            //     })
            //     return tol.toFixed(2);
            // },
            handleDel(id) {
                this.datalist = this.datalist.filter(item => item.id !== id);
                this.checkList = this.checkList.filter(item => item.id !== id);
                //同步状态
                this.handleCheck();
                if(this.datalist.length===0) this.checkAll = false;
            },
            handleCheck() {
                this.checkAll = this.checkList.length === this.datalist.length;
            },
            handleCheckAll() {
                if (this.checkAll) this.checkList = this.datalist;
                else this.checkList = [];
            }
        },
        computed:{
            computedSum() {
                let tol = 0;
                this.checkList.forEach(item => {
                    tol += item.price * item.num;
                })
                return tol.toFixed(2);
            },
        }
    }

    Vue.createApp(obj).mount("#box")
</script>
</body>
</html>